<template>
  <div>
    <page-list
      :x-uri="uri"
      :custom-components="custom"
      x-tabs="custom"
      :tree="true"
      :lazy="true"
      :lazy-fun="loadChild"
      :doactions="doactions"
      :checkbox-item="false"
    >
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'site.pc.navi.top.add'" size="mini" type="primary" @click="createTop">新建导航</el-button>
      </template>
    </page-list>
    <sort-dialog :value.sync="sortValue" :visible.sync="visible" :disable-submit="disableSubmit" @submit="onSubmitSort" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Content from './components/content.vue';
import Tabs from '../tabs.vue';
import SortDialog from '@/components/update-sort-dialog';

export default {
  components: {
    PageList,
    Tabs,
    SortDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/admin/site/navi/top/list',
      doactions: [
        {
          title: '添加导航',
          meta: { permission: 'site.pc.navi.top.add' },
          display: function ({ row }) {
            return row.pid == 0;
          },
          callback: this.create
        },
        { title: '排序', meta: { permission: 'site.pc.navi.top.sort' }, callback: this.sortPopover },
        {
          title: '编辑',
          meta: { permission: 'site.pc.navi.top.edit' },
          callback: this.edit
        },
        { title: '删除', meta: { permission: 'site.pc.navi.top.del' }, callback: this.delete }
      ],
      custom: {
        content: Content
      },
      dialogVisible: false,
      disableSubmit: false,
      resetText: '清空',
      category: {
        pid: 0,
        title: ''
      },
      rulesTtitle: [
        { required: true, message: '分类名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{2,30}$/,
          message: '分类名称为2-30个字符',
          trigger: ['blur', 'change']
        }
      ],
      itemId: 0,
      visible: false,
      sortValue: 1 // 排序值
    };
  },
  methods: {
    createTop: function () {
      this.$router.push({ path: '/site/navi/top/0/create' });
    },
    // 加载导航列表
    loadChild: function (row, treeNode, resolve) {
      this.$http.get(
          '/admin/site/navi/top/' + row.id + '/children',
          {},
          ({ data }) => {
            resolve(data);
          },
          response => {
            resolve([]);
            this.$message.error(response.msg);
          },
          false
      );
    },
    create: function ({ row }) {
      this.$router.push({ path: '/site/navi/top/' + row.id + '/create' });
    },
    edit: function ({ row }) {
      this.$router.push({ path: '/site/navi/top/' + row.id + '/edit' });
    },
    delete: function ({ row }) {
      this.$box
          .confirm('此操作将无法恢复，确认删除吗')
          .then(() => {
            this.$http.delete(
                '/admin/site/navi/top/' + row.id + '/delete',
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {
          });
    },
    // 排序弹出层
    sortPopover({ row }) {
      this.visible = true;
      this.itemId = row.id
      this.sortValue = row.sort
    },
    // 保存
    onSubmitSort() {
      this.disableSubmit = true;
      this.$http.put('/admin/site/navi/top/' + this.itemId + '/sort', {
        sort: this.sortValue
      }, ({ msg }) => {
        this.$message.success(msg);
        this.disableSubmit = false;
        this.visible = false;
        this.reload();
      }, ({ msg }) => {
        this.$message.error(msg)
        this.disableSubmit = false;
      }, false)
    }
  }
};
</script>
